<template>
  <v-chart :style="styleProps" :option="option" class="echart" :autoresize="true" />
</template>

<script lang="ts">
import { computed, defineComponent, nextTick, reactive, ref, watch } from 'vue'
import {
  componentsDefaultProps,
  transformToComponentProps,
} from '@/defaultProps'
import { EChartsOption } from 'echarts'

console.log(
  'props',
  transformToComponentProps(componentsDefaultProps['e-chart'].props)
)
export default defineComponent({
  props: transformToComponentProps(componentsDefaultProps['e-chart'].props),
  setup(props) {
    const prop = reactive(props)
    const option = computed<EChartsOption>(() => {
      return {
        xAxis: {
          type: prop.eChartsXAxisType,
          data: prop.eChartsXAxisData,
        },
        yAxis: {
          type: prop.eChartsYAxisType,
          data: prop.eChartsYAxisData,
        },
        series: [
          {
            type: 'bar',
            data: [1, 2, 3, 4, 5, 6, 7],
          },
        ],
      }
    })
    return {
      option,
    }
  },
})
</script>

<style scoped>
.echart {
  width: 100% !important;
  height: 100% !important;
}
</style>
